<template>
	<div>
		<div class="address">
			<div>
				<p>您当前所在位置</p>
				<router-link to="/" class="link">我的订单</router-link>
			</div>
		</div>
		<div class="my_after_sales">
				<a-tabs default-active-key="1" >
					<a-tab-pane key="1" tab="面料订单">
						<div class="query">
							<div>
								<a-range-picker class="marg20"  :locale="locale">
									<a-icon slot="suffixIcon" type="calendar" />
								</a-range-picker>
								<a-select default-value="lucy" style="width: 238px" class="marg20" >
									<a-select-option value="jack">
										已完成
									</a-select-option>
									<a-select-option value="lucy">
										发货中
									</a-select-option>
									<a-select-option value="Yiminghe">
										已接单
									</a-select-option>
									<a-select-option value="Yiminghe1">
										已拒绝
									</a-select-option>
									<a-select-option value="Yiminghe2">
										制作中
									</a-select-option>
								</a-select>
								<a-input placeholder="请输入订单编号" class="marg20" style="width: 238px" />
								<a-button type="primary" class="marg20" >
									查询
								</a-button>
							</div>
							<a href="" class="dc">导出</a>
						</div>
						<a-table class="table1" lign="center" :columns="columns" :data-source="data">
							<a slot="k9" slot-scope="text" style="color:#C49D18">
								<div style="display: flex;justify-content: center;">
									<router-link to="/MyOrderSubsystem/OrderDetalisFabric" style="margin-right: 10px;color:#C49D18">查看详情</router-link>
									<p v-if="text == 1">编辑</p>
									<p v-if="text == 2" @click="showDeleteConfirm">取消订单</p>
									<router-link v-if="text == 3" to="/MyOrderSubsystem/NewAfterSaleOrder1" style="color:#C49D18">申请售后</router-link>
								</div>
							</a>
							<a slot="k7" slot-scope="text1" style="color:#C49D18">{{ text1 }}</a>
						</a-table>
					</a-tab-pane>
					<a-tab-pane key="2" tab="个定订单" force-render>
						<div class="query">
							<div>
								<a-range-picker class="marg20"  :locale="locale">
									<a-icon slot="suffixIcon" type="calendar" />
								</a-range-picker>
								<a-select default-value="lucy" style="width: 238px" class="marg20" >
									<a-select-option value="jack">
										已完成
									</a-select-option>
									<a-select-option value="lucy">
										发货中
									</a-select-option>
									<a-select-option value="Yiminghe">
										已接单
									</a-select-option>
									<a-select-option value="Yiminghe1">
										已拒绝
									</a-select-option>
									<a-select-option value="Yiminghe2">
										制作中
									</a-select-option>
								</a-select>
								<a-input placeholder="请输入订单编号" class="marg20" style="width: 238px" />
								<a-button type="primary" class="marg20">
									查询
								</a-button>
							</div>
							<a href="" class="dc">导出</a>
						</div>
						<a-table class="table1" lign="center" :columns="columns1" :data-source="data1">
							<a slot="k9" slot-scope="text" style="color:#C49D18">
								<div style="display: flex;justify-content: center;">
									<router-link to="/MyOrderSubsystem/OrderDetalisIndividual" style="margin-right: 10px;color:#C49D18">查看详情</router-link>
									<p style="margin-right: 10px;" v-if="text[0] == 1 || text[1] == 1" @click="showDeleteConfirm">取消订单</p>
									<router-link v-if="text[0] == 2 || text[1] == 2" to="/MyOrderSubsystem/NewAfterSaleOrder3" style="margin-right: 10px;color:#C49D18">申请售后</router-link>
									<p style="margin-right: 10px;" v-if="text[0] == 3 || text[1] == 3">再来一单</p>
									<p style="margin-right: 10px;" v-if="text[0] == 4 || text[1] == 4" @click="showDeleteConfirm">删除</p>
								</div>
							</a>
						</a-table>
					</a-tab-pane>
					<a-tab-pane key="3" tab="团体订单">
						<div class="query">
							<div>
								<a-range-picker class="marg20"  :locale="locale">
									<a-icon slot="suffixIcon" type="calendar" />
								</a-range-picker>
								<a-select default-value="lucy" style="width: 238px" class="marg20" >
									<a-select-option value="jack">
										已完成
									</a-select-option>
									<a-select-option value="lucy">
										发货中
									</a-select-option>
									<a-select-option value="Yiminghe">
										已接单
									</a-select-option>
									<a-select-option value="Yiminghe1">
										已拒绝
									</a-select-option>
									<a-select-option value="Yiminghe2">
										制作中
									</a-select-option>
								</a-select>
								<a-input placeholder="请输入订单编号" class="marg20" style="width: 238px" />
								<a-button type="primary" class="marg20" >
									查询
								</a-button>
							</div>
							<a href="" class="dc">导出</a>
						</div>
						<a-table class="table1" lign="center" :columns="columns2" :data-source="data1">
							<a slot="k9" slot-scope="text" style="color:#C49D18">
								<div style="display: flex;justify-content: center;">
									<router-link to="/MyOrderSubsystem/OrderDetalisGroup" style="margin-right: 10px;color:#C49D18">查看详情</router-link>
									<p style="margin-right: 10px;" v-if="text[0] == 1 || text[1] == 1" @click="showDeleteConfirm">取消订单</p>
									<router-link v-if="text[0] == 2 || text[1] == 2" to="/MyOrderSubsystem/NewAfterSaleOrder4" style="margin-right: 10px;color:#C49D18">申请售后</router-link>
									<p style="margin-right: 10px;" v-if="text[0] == 3 || text[1] == 3">再来一单</p>
									<p style="margin-right: 10px;" v-if="text[0] == 4 || text[1] == 4" @click="showDeleteConfirm">删除</p>
								</div>
							</a>
						</a-table>
					</a-tab-pane>
					<a-tab-pane key="4" tab="现货订单">
						<div class="query">
							<div>
								<a-range-picker class="marg20" :locale="locale">
									<a-icon slot="suffixIcon" type="calendar" />
								</a-range-picker>
								<a-select default-value="lucy" style="width: 238px" class="marg20" >
									<a-select-option value="jack">
										已完成
									</a-select-option>
									<a-select-option value="lucy">
										发货中
									</a-select-option>
									<a-select-option value="Yiminghe">
										已接单
									</a-select-option>
									<a-select-option value="Yiminghe1">
										已拒绝
									</a-select-option>
									<a-select-option value="Yiminghe2">
										制作中
									</a-select-option>
								</a-select>
								<a-input placeholder="请输入订单编号" class="marg20" style="width: 238px" />
								<a-button type="primary" class="marg20" >
									查询
								</a-button>
							</div>
							<a href="" class="dc">导出</a>
						</div>
						<a-table class="table1" lign="center" :columns="columns3" :data-source="data1">
							<a slot="k9" slot-scope="text" style="color:#C49D18">
								<div style="display: flex;justify-content: center;">
									<router-link to="/MyOrderSubsystem/OrderDetalisSpotGoods" style="margin-right: 10px;color:#C49D18">查看</router-link>
									<p style="margin-right: 10px;" >复制</p>
									<p style="margin-right: 10px;" >售后</p>
								</div>
							</a>  
						</a-table>
					</a-tab-pane>
				</a-tabs>
			</div>
		
	</div>
</template>

<script>
	const columns = [{
			dataIndex: 'k1',
			key: 'k1',
			title: '序号',
		},
		{
			title: '订单编号',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '下单时间',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '面料编号',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '购买米数',
			key: 'k5',
			dataIndex: 'k5'
		},
		{
			title: '实际单价',
			key: 'k6',
			dataIndex: 'k6'
		},
		{
			title: '金额',
			key: 'k7',
			dataIndex: 'k7',
			scopedSlots: {
				customRender: 'k7'
			},
		},
		{
			title: '订单状态',
			key: 'k8',
			dataIndex: 'k8',
		},
		{
			title: '操作',
			key: 'k9',
			dataIndex: 'k9',
			scopedSlots: {
				customRender: 'k9'
			},
		},
	];

	const data = [{
		k1: '1',
		k2: '23341964AQ',
		k3: '2020-06-01',
		k4: '2264AA',
		k5: '40米',
		k6: '400元/米',
		k7: '16000元',
		k8: '待确认',
		k9: '1',
	},
	{
		k1: '1',
		k2: '23341964AQ',
		k3: '2020-06-01',
		k4: '2264AA',
		k5: '40米',
		k6: '400元/米',
		k7: '16000元',
		k8: '待支付',
		k9: '2',
	},
	{
		k1: '1',
		k2: '23341964AQ',
		k3: '2020-06-01',
		k4: '2264AA',
		k5: '40米',
		k6: '400元/米',
		k7: '16000元',
		k8: '待支付',
		k9: '3',
	}];

	const columns1 = [{
			dataIndex: 'k1',
			key: 'k1',
			title: '序号',
		},
		{
			title: '订单编号',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '订单名称',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '下单时间',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '客户姓名',
			key: 'k5',
			dataIndex: 'k5'
		},
		{
			title: '客户代码',
			key: 'k6',
			dataIndex: 'k6'
		},
		{
			title: '金额',
			key: 'k7',
			dataIndex: 'k7'
		},
		{
			title: '订单状态',
			key: 'k8',
			dataIndex: 'k8'
		},
		{
			title: '操作',
			key: 'k9',
			dataIndex: 'k9',
			scopedSlots: {
				customRender: 'k9'
			},
		},
	];
	
	const data1 = [{
		k1: '1',
		k2: '23341964AQ',
		k3: '2020-06-01',
		k4: '2264AA',
		k5: '40米',
		k6: '400元/米',
		k7: '16000元',
		k8: '待确认',
		k9: [1,3],
	},
	{
		k1: '1',
		k2: '23341964AQ',
		k3: '2020-06-01',
		k4: '2264AA',
		k5: '40米',
		k6: '400元/米',
		k7: '16000元',
		k8: '待支付',
		k9: [1, 2],
	}];


	const columns2 = [{
			dataIndex: 'k1',
			key: 'k1',
			title: '序号',
		},
		{
			title: '订单编号',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '订单名称',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '下单时间',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '公司简称',
			key: 'k5',
			dataIndex: 'k5'
		},
		{
			title: '公司代码',
			key: 'k6',
			dataIndex: 'k6'
		},
		{
			title: '金额',
			key: 'k7',
			dataIndex: 'k7'
		},
		{
			title: '订单状态',
			key: 'k8',
			dataIndex: 'k8'
		},
		{
			title: '操作',
			key: 'k9',
			dataIndex: 'k9',
			scopedSlots: {
				customRender: 'k9'
			},
		},
	];

	const columns3 = [{
			dataIndex: 'k1',
			key: 'k1',
			title: '序号',
		},
		{
			title: '订单编号',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '下单时间',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '产品货号',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '产品名称',
			key: 'k5',
			dataIndex: 'k5'
		},
		{
			title: '数量',
			key: 'k6',
			dataIndex: 'k6'
		},
		{
			title: '金额',
			key: 'k7',
			dataIndex: 'k7',
			
		},
		{
			title: '订单状态',
			key: 'k8',
			dataIndex: 'k8',
			
		},
		{
			title: '操作',
			key: 'k9',
			dataIndex: 'k9',
			scopedSlots: {
				customRender: 'k9'
			},
		}
	];
	
	// @ is an alias to /src
	import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
	export default {
		name: 'MyAfterSales',
		data() {
			return {
				locale,
				data,
				data1,
				columns,
				columns1,
				columns2,
				columns3
			}
		},
		 methods: {
		  showDeleteConfirm() {
		    this.$confirm({
		      title: '确定取消订单?',
		      content: '',
		      okText: 'Yes',
		      okType: 'danger',
		      cancelText: 'No',
		      onOk() {
		        console.log('OK');
		      },
		      onCancel() {
		        console.log('Cancel');
		      },
		    });
		  },  
		 },
	}
</script>

<style scoped lang="scss">
	.my_after_sales {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		margin-top: 20px;
		padding: 20px 35px;
		
		.dc {
			    
			        width: 95px;
			        height: 38px;
			        display: flex;
			        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
			        font-weight: 500;
			        font-style: normal;
			        align-items: center;
			        justify-content: center;
					background-image: url(../../assets/u9117.svg);
					font-size: 13px;
					color: #333;
				
		}

		.ant-tabs {
			color: #cccccc;
			font-size: 16px !important;
		}

		.query {
			display: flex;
			position: relative;
			justify-content: space-between;
		}

		.marg20 {
			margin-right: 20px;
		}

		.table1 {
			margin-top: 20px;
		}

	}
</style>
